<!-- @aloys -->


<template>
    <Menus>
        <template v-slot:routeF>
            客户管理
        </template>
        <template v-slot:routeS>
            客户列表
        </template>
       
        
        <page-layout>
                  <template v-slot:navbar >
                        <div class="customernav">
                              <div class="customerhead">客户管理</div>
                              <el-button type="primary"  @click="toEditPage()" class="btn-add" round>+新增客户</el-button>
                        </div>
                        <div class="cus-nav">
                              <span @click="allCustomer">所有客户</span>
                              <span @click="mineCustomer(nam.id)">我的客户</span>
                              <span>下属客户</span>
                        </div>
                        
                  </template>
                  <template v-slot:header >
                        <el-input v-model="query.id" placeholder="输入客户名称进行查询"></el-input>
                        <el-select v-model="value1" class="m-2" placeholder="客户类别" >
                              <el-option
                                    v-for="item in options"
                                    :key="item.value1"
                                    :label="item.label"
                                    :value="item.value1"
                              />
                        </el-select>
                        <el-select v-model="value" class="m-2" placeholder="行业" >
                              <el-option
                                    v-for="item in optionss"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                              />
                        </el-select>
                        <el-date-picker
                              v-model="value2"
                              type="date"
                              placeholder="Pick a date"
                              format="YYYY/MM/DD"
                              value-format="YYYY-MM-DD"
                              />
                       
                        <el-button  type='primary' @click="queryEvt">查询</el-button>
                        
              </template>
              <el-table :data="tableData"
                  height="350"
                  style="width: 100%;">
                  <!-- prop属性就是去tableData中的对象属性 -->
                  <el-table-column prop="id" label="客户名称" width="120" :fixed="true"/>
                  <el-table-column prop="name" label="归属人员" width="160" fixed="left"/>
                  <el-table-column prop="type" label="客户类别" width="120"/>
                  <el-table-column prop="industry" label="行业" width="120"/>
                  <el-table-column prop="date" label="创建日期" width="180"/>
                  <el-table-column prop="province" label="省份" min-width="100"/>
                  <el-table-column prop="city" label="城市" min-width="100"/>
                  <el-table-column label="操作" width="260" fixed="right">
                      <!-- 可以通过插槽传值的方式获取到当前列的数据 -->
                      <template v-slot="data">
                        <span @click="toEditPage(data)" class="table-btnmsg table-btn">跟进</span>
                          <span @click="toEditPage(data)" class="table-btne table-btn">编辑</span>
                          <el-popconfirm width="260px"
                              @confirm="deleteEvt(data.row)"
                              :title="`确定要删除【${data.row.name}】的人员信息，不可以恢复，确定要删除？`">
                              <template #reference>
                                  <span class="table-btnd table-btn">删除</span>
                              </template>
                          </el-popconfirm>
                      </template>
                  </el-table-column>
              </el-table>
              <template v-slot:footer>
                  <div class="qw">
                        <span>共{{ total }} 条记录</span>
                  </div> 
                  <el-pagination v-model:current-page="query.page"
                      v-model:page-size="query.size"
                      :small="true"
                      :background="true"
                      layout="prev, pager, next,sizes, jumper"
                      :total="total"
                      :page-sizes="[10, 30, 50, 100]"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      class="kw"
                     />     
              </template>
          </page-layout>
    </Menus>

</template>
<style lang="less">
@import '../../style/common.less';

.qw{
      float: left;
      font-size: 16px;
}
.kw{
      float: right;
}
.table-btne{
      color: @aloyse;
}
.table-btnd{
      color: @aloysd;
}
.table-btnmsg{
      color: @aloysmsg;
}
.ymd{
      margin-left: 20px;
}
.customernav{
      > .customerhead{
            height: 30px;
            border-left: 5px solid skyblue;
            padding: 0 0 0 10px;
            font-weight: 700;
            line-height: 30px;
            float: left;
      }
      > .btn-add{
            float: right;  
            margin-right: 20px; 
            background-color: @aloysmsg;  
      }

}

.customernav::after{
      content: '';
      height: 0;
      display: block;
      clear: both;
      visibility: hidden;

}

.cus-nav{
      padding: 5px 30px;
      font-size: 16px;
      > span{
            padding: 0 20px;
            .touch()
            
      }
}


.el-table .cell{
      text-align: center;
} 
</style>


  
<script setup>

  import { onMounted, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
  import ajax from '../../apis/ajax.js'

  const store = useStore()
  
  const tableData = ref([])
  const query = reactive({
      id: '',
      page: 1,
      size: 10
  })
  const total = ref(0)
  const value2 = ref('')
  const value3 = ref('')

  const num = store.getters['common/num']
  const nam = store.getters['common/userInfo']
  onMounted(function() {
      // console.log(nam)
      if(!!num){
            // console.log(num)
            getList(num)
      }else{
            getList() 
      }
         
  })
  
  function getList(it) {
      ajax({
          url: '/customer/info/list',
          /* 如果是get请求，可以使用params对象来传递参数，他会自动进行url地址拼接 */
          params: {
            id:query.id,
            industry: value.value,
            type: value1.value,
            date: value2.value,
            name: it,
              ...query
          }
      }).then(({data}) => {
            // console.log(data)
          tableData.value = data.data.rows
          total.value = data.data.total
      })
  }
//   all customer
function allCustomer(){
      store.commit('common/setNum','')
      getList()
}

  /* minecustomer */
  function mineCustomer(it){
      console.log(it)
      store.commit('common/setNum', it)
      getList(it)
  }
  
  /* 查询按钮 */
  function queryEvt() {
      query.page = 1
      query.size = 10
      getList()
      value.value= ''
      value1.value = ''
      value.value = ''

  }
  
  /* 删除行 */
  function deleteEvt(row) {
      ajax({
            url: '/customer/' + row.id,
            method: 'DELETE'
      }).then(d => {
            console.log(d)
            getList()
      })
  }
  
  /* 防抖 */
  let timer = null
  function handleSizeChange() {
      pagingGetList()
  }
  function handleCurrentChange() {
      pagingGetList()
  }
  function pagingGetList() {
      clearTimeout(timer)
      timer = setTimeout(function() {
          getList()
      }, 200)
  }
  
  /* 行点击按钮事件 */
  const router = useRouter()
//   编辑新增按钮
  function toEditPage(_data) {
      console.log(_data)
      if (!!_data) {
          router.push('/customer/edit?id=' + _data.row.id)
      } else {
          router.push('/customer/edit')
      }
  }




const value = ref('')
const value1 = ref('')

const options = [
  {
    value1: '普通',
    label: '普通',
  },
  {
    value1: 'vip',
    label: 'vip',
  }
  
]

const optionss = [
  {
    value: '半导体',
    label: '半导体',
  },
  {
    value: '软件服务',
    label: '软件服务',
  },
  {
    value: '新能源',
    label: '新能源',
  },
  {
    value: '电子',
    label: '电子',
  },
  {
    value: '集成电路',
    label: '集成电路',
  },
  {
    value: '能源',
    label: '能源',
  }
  
]
  </script>

  

  